<template>
  <div class='pay-mshpay'>
    <div class="pay-info">
      <span class="info">需支付金额</span>
      <div class="price-box">
        <span class="sup">¥</span>
        <span>{{totalInstallmentAmount|price}}</span>
      </div>
    </div>
    <div class="pay-list">
        <div class="pay-head">
            <img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/pay_msh.png" />
            <div class="pay-head-content">
                <div class="left">
                    <div class="title">马上花分期支付</div>
                    <div class="info">可用额度：¥{{orderTrail.availableAmount|price}}</div>
                </div>
                <div class="price">{{orderTrail.mshIntallmentAmount|price}}</div>
            </div>
        </div>
        <ul class="pay-item">
            <li 
                class="cell" 
                v-for="(item,index) in trialResult"
                :class="index==selectIndex?'active':''"
                @click="changeSelect(index)"
                :key="item.installmentNo">
                <div class="sl-nums">￥{{item.principal}} X {{item.installmentNo}}期</div>
                <span class="tips">(含服务费)</span>
            </li>
        </ul>
    </div>
    <div class="wx-mess" v-if="orderTrail.downPayAmount>0">
        <img 
            class="wx-icon" 
            src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/wxicn.png" />
        <div class="content">
            <div class="type">支付差额</div>
            <div class="info">微信支付</div>
        </div>
        <span class="diff-price">¥{{orderTrail.downPayAmount|price}}</span>
    </div>
    <div class="tips-box">
        <div class="info">温馨提示：众安保险提供消费分期信用保险服务，借款服务由赢众通达提供</div>
    </div>
    <confirm
        title="输入交易密码"
        v-model="showInputPasw"
        @on-confirm='paswOnfirm'
        >
       <div class="pay-pasw">
            <copaypassword
                ref='copaypassword'
                v-model="password" 
                :size="6"
            ></copaypassword>
       </div>
    </confirm>
    <div
        @click="goPay"
        class="fixed">
       立即支付
    </div>
  </div>
</template>
<script type="text/javascript">
import utils from "@/util/util";
import Api from "@/util/api";
import copaypassword from '@/components/copaypassword';
import  { Confirm } from 'vux';
import { log } from 'util';
export default {
  components:{
      copaypassword,
      Confirm
  },
  data() {
    return {
      radioType:"CMBC",
      createdInfo:{},
      zaUserInfo:{},
      orderTrail:{},
      trialResult:[],
      selectIndex:0,
      password:"",
      showInputPasw:false,
      tradeName:""
    };
  },
  async mounted() {
      var {orderId,tradeName} = this.$route.query;
      this.orderId = orderId;
      this.tradeName = tradeName;
      this.loading("请稍等...");
    
     //测算分期金额
      await this.getPayInfo();
     //这里订单支付完成会有回掉。
      if(this.orderTrail == null){
        return;
      }

      //查看授信状态
      await this.getUserInfo();
      if(this.createdInfo.status != "2"){
        this.$vux.loading.hide();
        return this.alert({
            title:"花伴商城",
            content:"你还未获得马上花分期额度，请您在“花伴商城PLUS”微信小程序中完成授信申请。",
            onHide:()=>{
                this.$router.push("/find");
            }
        })
      }
      //查询一帐通情况
      await this.queryUserInfo();
      if(this.zaUserInfo.progress && this.zaUserInfo.progress.passwordSet == "0"){
        this.$vux.loading.hide();
        return this.alert({
            title:"花伴商城",
            content:"您的支付密码未设置，请您在“花伴商城PLUS”微信小程序中完成密码设置。",
            onHide:()=>{
                this.$router.push("/find");
            }
        })
      }

      //获取分期列表
      await this.getPayList();
      this.$vux.loading.hide();
  },
  methods:{
      getUserInfo(){
        return this.post(Api.queryCreditResult)
        .then((d)=>{
            if(d.code == 200){
                this.createdInfo = d.data;
            }
        })
      },
      queryUserInfo(){
        return this.post(Api.queryUserInfo)
        .then((d)=>{
            if(d.code == 200){
                this.zaUserInfo = d.data;
            }
        })
      },
      getPayList(){
          return this.post(Api.consumeTrial,{
              totalInstallmentAmount:this.totalInstallmentAmount
          })
          .then((d)=>{
              if(d.code == 200){
                  this.trialResult = d.data.trialResult;
              }else{
                  this.toast(d.message);
              }
          })
      },
      getPayInfo(){
        var {orderId} = this;
        return this.post(Api.mshOrderTrial,{orderId})
        .then((d)=>{
            if(d.code == 200){
                this.orderTrail = d.data;
                console.log(this.orderTrail)
            }else{
                this.$vux.loading.hide();
                this.toast(d.message);
            }
        })
      },
      changeSelect(index){
          this.selectIndex = index;
      },
      paswOnfirm(){
          if(this.password.length==6){
              this.payOrder();
          }else{
              this.toast("请输入完整密码");
              return false;
          }
      },
      payOrder(){
        this.loading("支付中，请勿刷新!");
        let selectItem = this.trialResult[this.selectIndex];
        let params = {
            orderId:this.orderId,
            totalInstallmentAmount:this.orderTrail.mshIntallmentAmount,
            password:this.password,
            totalInstallmentNo:selectItem.installmentNo,
            tradeName:this.tradeName
        }
        this.post(Api.newOrderPreTrade,params)
        .then((d)=>{
            this.$vux.loading.hide();
            if(d.code == 200){
                console.log(d);
                this.$router.push(`/pay/cmbcPaySucc?orderId=${this.orderId}`);
            }else{
                this.toast(d.message);
            }
        })
      },
      goPay(){
          this.password = "";
          this.$refs.copaypassword.cleanAll();
          this.showInputPasw = true;
      }
  },
  computed:{
      totalInstallmentAmount(){
          if(this.orderTrail.mshIntallmentAmount){
              return this.orderTrail.downPayAmount+this.orderTrail.mshIntallmentAmount;
          }
          return 0;
      }
  }
};
</script>
<style lang='less' rel='stylesheet/less'>
@import "../styles/theme.less";

.pay-mshpay {
  background: #f2f2f2;
  height: 100%;
  width: 100%;
  font-family: @font-rl;
  .weui-dialog__btn_primary{
      color: #FBC200;
  }
  .pay-pasw{
      padding: .3rem 0;
  }
  .wx-mess{
      height: 1.4rem;
      background-color: #fff;
      display: flex;
      align-items: center;
      flex-direction: row;
      padding: 0 .3rem;
      margin-top: .18rem;
      .wx-icon{
          width: .5rem;
          height: .46rem;
      }
      .content{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 .3rem;
          .type{
            font-size: .3rem;
            color: #464646;
          }
          .info{
            font-size: .22rem;
            color: #909090;
          }
      }
      .diff-price{
        font-size: .36rem;
        color: #464646;
        letter-spacing: 0;
      }
  }
  .fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1rem;
    background-color: #FBC200;
    font-size: .32rem;
    color: #464646;
    text-align: center;
    line-height: 1rem;
  }
  .pay-list{
      background-color: #fff;
      padding: 0 .3rem;
      margin-top: .18rem;
      .pay-head{
          display: flex;
          align-items: center;
          flex-direction: row;
          height: 1.4rem;
          >img{
              width: .5rem;
              height: .5rem;
          }
          .pay-head-content{
            flex:1;
            height: 100%;
            padding-left: .3rem;
            display: flex;
            border-bottom: .01rem solid #f2f2f2;
            flex-direction: row;
            align-items: center;
            .left{
                flex: 1;
                .title{
                    font-size: .3rem;
                    color: #464646;
                }
                .info{
                    /* 可用额度: ￥30.000.00: */
                    font-size: .22rem;
                    color: #909090;
                    letter-spacing: 0;
                }
            }
            .price{
                /* ￥890.00: */
                font-size: .36rem;
                color: #464646;
            }
          }
      }
      .pay-item{
        background-color: #fff;
        padding-left: .5rem;
        .cell{
            height: 1rem;
            border-bottom: .01rem solid #f2f2f2;
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: .24rem;
            &:last-child{
                border-bottom: 0px solid #fff;
            }
            &::before{
                content: '';
                width: .2rem;
                height: .2rem;
                padding: .04rem;
                border: .02rem solid #BCBCBC;
                border-radius: 50%;
                background-clip: content-box;
                -webkit-background-clip: content-box;
                display: inline-block;
                }
            &.active::before{
                background-color: #FBC200;
                border: .02rem solid #FBC200;
            }
            .sl-nums{
                flex: 1;
                padding-left: .2rem;
                color: #464646;
            }
            .tips{
                color: #909090;
            }
        }
      }
  }
.tips-box{
    margin-top: .3rem;
    padding: 0 .3rem;
    .info{
        font-size: .2rem;
        color: #909090;
        text-align: center;
    }
}
.btn{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1rem;
    background-color: @app-color;
    color: #464646;
    font-size: .32rem;
    text-align: center;
    line-height: 1rem;
  }
  .pay-info {
    height: 1.92rem;
    display: flex;
    background-color: #ffffff;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .info {
      font-size: 0.28rem;
      color: #909090;
    }
    .price-box {
      color: #464646;
      font-size: 0.54rem;
      position: relative;
      padding-left: 0.2rem;
      .sup {
        font-size: 0.16rem;
        position: absolute;
        top: 0.16rem;
        left: 0;
      }
    }
  }
}
</style>
